<template>
  <div class="data-statistics v-flex">
    <div style="height: 40px;">
      <el-checkbox v-model="conditionFind.gt" @change="conditionGtFind">高铁</el-checkbox>
      <el-checkbox v-model="conditionFind.pt" @change="conditionPtFind">普铁</el-checkbox>
      <span style="margin-left: 10px;font-size: 14px;color: #606266;">年份：</span>
      <el-date-picker
        v-model="conditionFind.year"
        size="small"
        type="year"
        style="width: 120px;"
        :clearable="false"
        placeholder="选择年份"
        @change="conditionYearFind" />
    </div>
    <el-row>
      <el-col v-loading="loading.loading1" :span="8" style="max-width:430px;min-width:380px;position:relative;">
        <!--        <p class="col-title"><i class="el-icon-s-data" />检测计划基本信息</p>-->
        <p class="p_title">检测计划基本信息</p>
        <hr style="color: #EBEEF5;margin-left: 10px;margin-right: 10px;">
        <div class="v-flex col-div" style="height: 75%;">
          <div class="basic-div">
            <div class="itemrow-item"><p>1C计划-超期数</p><span>{{ tableList.OverTime_1C }}</span></div>
            <div class="itemrow-item"><p>2C计划-超期数</p><span>{{ tableList.OverTime_2C }}</span></div>
            <div class="itemrow-item"><p>4C计划-超期数</p><span>{{ tableList.OverTime_4C }}</span></div>
          </div>
          <div class="basic-div">
            <div class="itemrow-item"><p>1C计划-完成数</p><span>{{ tableList.Complete_1C }}</span></div>
            <div class="itemrow-item"><p>2C计划-完成数</p><span>{{ tableList.Complete_2C }}</span></div>
            <div class="itemrow-item"><p>4C计划-完成数</p><span>{{ tableList.Complete_4C }}</span></div>
          </div>
          <div class="basic-div">
            <div class="itemrow-item"><p>1C计划-总数</p><span>{{ tableList.Total_1C }}</span></div>
            <div class="itemrow-item"><p>2C计划-总数</p><span>{{ tableList.Total_2C }}</span></div>
            <div class="itemrow-item"><p>4C计划-总数</p><span>{{ tableList.Total_4C }}</span></div>
          </div>
        </div>
      </el-col>
      <el-col v-loading="loading.loading5">
        <!--        <div class="col-title" style="display:flex;">-->
        <!--          <p class="col-title"><i class="el-icon-s-data" />预警信息（<font color="#D4D4D4" style="margin-left: 5px;margin-right: 5px">{{this.earlyWarningNum}}</font>条）</p>-->
        <!--        </div>-->
        <p class="p_title">预警信息（<font style="margin-left: 5px;margin-right: 5px">{{ this.earlyWarningNum }}</font>条）</p>
        <hr style="color: #EBEEF5;margin-left: 10px;margin-right: 10px;">
        <div style="font-size: 10px;margin-left:400px;margin-bottom: -25px;margin-top:20px;margin-right: 20px;z-index:10;position: relative;width: 400px;" align="right">
          预警周期：
          <el-radio-group v-model="radio" @change="warningCycle">
            <el-radio :label="7">本周</el-radio>
            <el-radio :label="3">三天内</el-radio>
            <el-radio :label="1">当日</el-radio>
          </el-radio-group>
        </div>
        <div class="col-div" align="center">
          <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
            <el-tab-pane label="1C" name="first" style="overflow: auto;">
              <el-table :data="tableData_1C" style="width: 98%" :default-sort="{prop: 'planDate', order: 'descending'}">
                <el-table-column prop="deptName" label="单位" align="center" />
                <el-table-column prop="planDate" label="计划检测日期" :formatter="formatDate" align="center" />
                <el-table-column prop="lineName" label="线路" align="center" width="130px" />
                <el-table-column prop="directionName" label="行别" align="center" />
                <el-table-column prop="planBegin" label="计划起站" align="center" />
                <el-table-column prop="planEnd" label="计划止站" align="center" />
                <el-table-column prop="planDate" label="距离天数" sortable align="center" :formatter="dateDiff" />
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="2C" name="second" style="overflow: auto;">
              <el-table :data="tableData_2C" style="width: 98%;overflow-y: auto;" :default-sort="{prop: 'planDate', order: 'descending'}">
                <el-table-column prop="deptName" label="单位" align="center" />
                <el-table-column prop="planDate" label="计划检测日期" :formatter="formatDate" align="center" />
                <el-table-column prop="lineName" label="线路" align="center" width="130px" />
                <el-table-column prop="directionName" label="行别" align="center" />
                <el-table-column prop="planBegin" label="计划起站" align="center" />
                <el-table-column prop="planEnd" label="计划止站" align="center" />
                <el-table-column prop="date" label="距离天数" sortable align="center" :formatter="dateDiff" />
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="4C" name="third" style="overflow: auto;">
              <el-table :data="tableData_4C" style="width: 98%" :default-sort="{prop: 'planDate', order: 'descending'}">
                <el-table-column prop="deptName" label="单位" align="center" />
                <el-table-column prop="planDate" label="计划检测日期" :formatter="formatDate" align="center" />
                <el-table-column prop="lineName" label="线路" align="center" width="130px" />
                <el-table-column prop="directionName" label="行别" align="center" />
                <el-table-column prop="planBegin" label="计划起站" align="center" />
                <el-table-column prop="planEnd" label="计划止站" align="center" />
                <el-table-column prop="date" label="距离天数" sortable align="center" :formatter="dateDiff" />
              </el-table>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col v-loading="loading.loading2" :span="10" style="max-width:550px;min-width:600px;position:relative;">
        <!--        <div class="col-title" style="display:flex;">-->
        <!--          <p class="col-title"><i class="el-icon-s-data" />检测计划完成率</p>-->
        <!--        </div>-->
        <p class="p_title">检测计划完成率</p>
        <hr style="color: #EBEEF5;margin-left: 10px;margin-right: 10px;">
        <div id="chart-one1" class="col-div" align="center" style="margin-top: 20px;">
          <div id="chart-gauge1" class="col-div" style="width: 33%;float: left;" />
          <div id="chart-gauge2" class="col-div" style="width: 33%;float: left;" />
          <div id="chart-gauge3" class="col-div" style="width: 33%;float: left;" />
        </div>
      </el-col>
      <el-col v-loading="loading.loading4">
        <!--        <div class="col-title" style="display:flex;">-->
        <!--          <p class="col-title"><i class="el-icon-s-data" />检测计划概况</p>-->
        <!--        </div>-->
        <p class="p_title">检测计划概况</p>
        <hr style="color: #EBEEF5;margin-left: 10px;margin-right: 10px;">
        <div id="chart-one3" class="col-div" />
      </el-col>
    </el-row>
    <el-row>
      <el-col v-loading="loading.loading3" :span="24" style="max-width:100%;min-width:450px;position:relative;">
        <!--        <p class="col-title"><i class="el-icon-s-data" />各单位检测计划完成率</p>-->
        <p class="p_title">各单位检测计划完成率</p>
        <hr style="color: #EBEEF5;margin-left: 10px;margin-right: 10px;">
        <div class="v-flex col-div">
          <div id="chart-one2" class="col-div completionRate_css">
            <div v-for="(item,index) in chartList" :key="index">
              <div :id="`chart${index}`" class="completionRateItem_css" @click="completionRateDetal(item)" />
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <base-dialog
      class="dialog_box"
      width="60%"
      :show-default-footer="true"
      :visible.sync="dialog.visible"
      :title="dialog.title"
      :loading="dialog.loading"
      :disabled="dialog.disabled">
      <el-form
        :model="dialog.form"
        :disabled="dialog.disabled"
        label-width="100px">
        <div align="center">
          <span class="spanS">{{ this.dialog.deptName }}</span>
          <table id="customers">
            <tr>
              <td>1C计划编制数</td>
              <td>{{ this.dialog.form.Total_1C }}</td>
              <td>1C计划完成数</td>
              <td>{{ this.dialog.form.Complete_1C }}</td>
              <td>1C计划超期数</td>
              <td>{{ this.dialog.form.OverTime_1C }}</td>
            </tr>
            <tr>
              <td>2C计划编制数</td>
              <td>{{ this.dialog.form.Total_2C }}</td>
              <td>2C计划完成数</td>
              <td>{{ this.dialog.form.Complete_2C }}</td>
              <td>2C计划超期数</td>
              <td>{{ this.dialog.form.OverTime_2C }}</td>
            </tr>
            <tr>
              <td>4C计划编制数</td>
              <td>{{ this.dialog.form.Total_4C }}</td>
              <td>4C计划完成数</td>
              <td>{{ this.dialog.form.Complete_4C }}</td>
              <td>4C计划超期数</td>
              <td>{{ this.dialog.form.OverTime_4C }}</td>
            </tr>
            <tr>
              <td>计划编制总数</td>
              <td>{{ this.dialog.form.Total_1C + this.dialog.form.Total_2C + this.dialog.form.Total_4C }}</td>
              <td>计划完成总数</td>
              <td>{{ this.dialog.form.Complete_1C + this.dialog.form.Complete_2C + this.dialog.form.Complete_4C }}</td>
              <td>计划超期总数</td>
              <td>{{ this.dialog.form.OverTime_1C + this.dialog.form.OverTime_2C + this.dialog.form.OverTime_4C }}</td>
            </tr>
          </table>
        </div>
      </el-form>
    </base-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import echarts from 'echarts'
import { getYearPlanBasic,
  DeptYearPlanCompletionRate,
  getYearPlanCompletionDetail,
  getYearCheckedSituation,
  getPlanCompletionRate,
  getEarlyWarning
} from '@/api/cms/Inspection-management/Inspection-plan-management/InspectionPlanManagementIndex'

export default {
  name: 'InspectionPlanManagementIndex',
  components: {

  },
  data() {
    return {
      earlyWarningNum: 0,
      radio: 1,
      activeName: 'first',
      dialog: {
        title: '检测计划概况',
        visible: false,
        disabled: true,
        loading: false,
        deptName: null,
        form: {}
      },
      chartList: [],
      conditionFind: {
        gt: true,
        pt: true,
        year: new Date(),
        deptId: null,
        earlyWarningCycle: 1
      },
      bigTableShow: false,
      tableData: [],
      tableData_1C: [],
      tableData_2C: [],
      tableData_4C: [],
      clickNum: 0, // 有数据得缺陷统计加载太慢，判断接口返回结果使用
      params: {},
      timer: null,
      loading: {
        loading1: false,
        loading2: false,
        loading3: false,
        loading4: false,
        loading5: false
      },
      // colorList: ['#ff2121', '#ff5100', '#ffa600', '#ffd900', '#fff350'],
      // colorList : [
      //   '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
      //   '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
      //   '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
      // ],
      colorList: ['#4962FC', '#4B7CF3', '#dd3ee5', '#12e78c', '#fe8104', '#01C2F9', '#F4CB29', '#FD9E06'],
      myChart1: null,
      myChart2: null,
      myChart3: null,
      tableList: {},
      yearData: null
    }
  },
  computed: {
    ...mapGetters(['sidebar'])
  },
  watch: {
    'sidebar.opened': function(val) {
      var that = this
      setTimeout(function() {
        that.myChart1.resize()
        that.myChart2.resize()
        that.myChart3.resize()
      }, 500)
    }
  },
  mounted() {
    var that = this
    this.timer = setTimeout(function() {
      that.tabshow = false
    }, 5000)

    this.getData()

    // 监听屏幕变化，改变echarts尺寸
    const _this = this
    this.myresize = window.addEventListener('resize', function() {
      _this.$nextTick(_ => {
        if (_this.myChart1)_this.myChart1.resize()
        if (_this.myChart2)_this.myChart2.resize()
        if (_this.myChart3)_this.myChart3.resize()
      })
    })
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.myresize)
    if (this.myChart1) {
      this.myChart1.dispose()
      this.myChart1 = null
    }
    if (this.myChart2) {
      this.myChart2.dispose()
      this.myChart2 = null
    }
    if (this.myChart3) {
      this.myChart3.dispose()
      this.myChart3 = null
    }
  },
  methods: {
    conditionGtFind(val) {
      this.conditionFind.gt = val
      this.getData()
    },
    conditionPtFind(val) {
      this.conditionFind.pt = val
      this.getData()
    },
    conditionYearFind(val) {
      this.conditionFind.year = val
      this.getData()
    },
    gettableList(obj, name) {
      this.params = Object.assign({}, this.checkvalue, obj)
      this.params.name = name
      this.isshowtable = true
      var that = this
      setTimeout(function() {
        that.bigTableShow = true
      }, 100)
    },
    getData() {
      // 检测计划基本信息
      this.getYearPlanBasic()
      // 各单位本年检测计划完成率
      this.DeptYearPlanCompletionRate()
      // 检测计划完成率
      this.YearPlanCompletionRate()
      // 检测计划概况
      this.getYearCheckedSituation()
      // 预警信息
      this.getEarlyWarning()
    },
    getYearPlanBasic() {
      this.loading.loading1 = true
      getYearPlanBasic(this.conditionFind).then(res => {
        this.loading.loading1 = false
        this.tableList = res.data
      }).catch(_ => {
        this.loading.loading1 = false
      })
    },
    DeptYearPlanCompletionRate() {
      this.loading.loading3 = true
      DeptYearPlanCompletionRate(this.conditionFind).then(response => {
        this.chartList = response.data
        console.log(response.data)
        if (this.chartList.length > 0) {
          this.$nextTick(() => {
            this.initChart()
          })
        }
      }).catch(_ => {
        this.loading.loading3 = false
      })
    },
    initChart() {
      this.chartList.forEach((item, index) => {
        const myChart = echarts.init(document.getElementById(`chart${index}`))
        let color = '#81898B'
        const title = item.deptName
        const completeNum = item.completeNum
        let noCompleteNum = 1
        if (item.totalNum !== 0) {
          noCompleteNum = item.totalNum - item.completeNum
        }
        if (completeNum !== 0) {
          const rate = completeNum / item.totalNum
          if (rate < 0.5 && rate > 0.25) {
            color = '#F38152'
          }
          if (rate < 0.25) {
            color = '#81898B'
          }
          if (rate > 0.5) {
            color = '#12CE66'
          }
        }
        const option = {
          color: [color, '#eeeeee'],
          title: {
            text: title,
            textStyle: {
              fontSize: 12,
              fontWeight: 'normal'
            },
            x: 'center',
            y: 'bottom',
            padding: -2
          },
          series: [
            {
              name: '',
              type: 'pie',
              radius: ['70%', '74%'],
              avoidLabelOverlap: false,
              hoverAnimation: false, // 关闭放大动画
              selectedOffset: 0, // 选中块的偏移量
              label: {
                show: false,
                position: 'center',
                formatter: '{d}%'
              },
              emphasis: {
                label: {
                  show: false,
                  fontSize: '20',
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: [
                {
                  value: completeNum,
                  name: '已完成',
                  selected: true, // 默认选中第一块
                  label: {
                    show: true, // 默认显示第一块
                    fontSize: '14',
                    fontWeight: 'normal'
                  }},
                { value: noCompleteNum, name: '未完成' }
              ]
            }
          ]
        }
        myChart.setOption(option)
      })
      this.loading.loading3 = false
    },
    completionRateDetal(dept) {
      this.dialog.deptName = dept.deptName
      this.conditionFind.deptId = dept.deptId
      getYearPlanCompletionDetail(this.conditionFind).then(response => {
        this.dialog.form = response.data
      })
      this.dialog.visible = true
    },
    YearPlanCompletionRate() {
      this.loading.loading2 = true
      getPlanCompletionRate(this.conditionFind).then(response => {
        this.loading.loading2 = false
        const myChart1 = echarts.init(document.getElementById('chart-gauge1'))
        const myChart2 = echarts.init(document.getElementById('chart-gauge2'))
        const myChart3 = echarts.init(document.getElementById('chart-gauge3'))
        const option1 = {
          title: {
            text: '1C',
            textStyle: {
              fontSize: 15,
              fontWeight: 'normal'
            },
            x: 'center',
            y: 'bottom',
            padding: -3
          },
          series: [{
            radius: '100%',
            type: 'gauge',
            axisLine: {
              lineStyle: {
                width: 3,
                color: [
                  [0.25, '#81898B'],
                  [0.5, '#F38152'],
                  [1, '#12CE66']
                ]
              }
            },
            pointer: {
              itemStyle: {
                color: 'auto'
              },
              width: 4, // 指针的宽度
              length: '75%' // 指针长度，按照半圆半径的百分比
            },
            axisTick: {
              distance: -30,
              length: 8,
              lineStyle: {
                color: '#fff',
                width: 2
              }
            },
            splitLine: {
              distance: -50,
              length: 30,
              lineStyle: {
                color: '#fff',
                width: 1
              }
            },
            axisLabel: {
              color: 'auto',
              distance: -25,
              fontSize: 10
            },
            detail: {
              valueAnimation: true,
              formatter: '{value} %',
              color: 'auto',
              textStyle: {
                fontSize: 15
              }
            },
            data: [{
              value: response.data.CompleteRate_1C
            }]
          }]
        }
        const option2 = {
          title: {
            text: '2C',
            textStyle: {
              fontSize: 15,
              fontWeight: 'normal'
            },
            x: 'center',
            y: 'bottom',
            padding: -3
          },
          series: [{
            radius: '100%',
            type: 'gauge',
            axisLine: {
              lineStyle: {
                width: 3,
                color: [
                  [0.25, '#81898B'],
                  [0.5, '#F38152'],
                  [1, '#12CE66']
                ]
              }
            },
            pointer: {
              itemStyle: {
                color: 'auto'
              },
              width: 4, // 指针的宽度
              length: '75%' // 指针长度，按照半圆半径的百分比
            },
            axisTick: {
              distance: -30,
              length: 8,
              lineStyle: {
                color: '#fff',
                width: 2
              }
            },
            splitLine: {
              distance: -40,
              length: 30,
              lineStyle: {
                color: '#fff',
                width: 1
              }
            },
            axisLabel: {
              color: 'auto',
              distance: -22,
              fontSize: 10
            },
            detail: {
              valueAnimation: true,
              formatter: '{value} %',
              color: 'auto',
              textStyle: {
                fontSize: 15
              }
            },
            data: [{
              value: response.data.CompleteRate_2C
            }]
          }]
        }
        const option3 = {
          title: {
            text: '4C',
            textStyle: {
              fontSize: 15,
              fontWeight: 'normal'
            },
            x: 'center',
            y: 'bottom',
            padding: -3
          },
          series: [{
            radius: '100%',
            type: 'gauge',
            axisLine: {
              lineStyle: {
                width: 3,
                color: [
                  [0.25, '#81898B'],
                  [0.5, '#F38152'],
                  [1, '#12CE66']
                ]
              }
            },
            pointer: {
              itemStyle: {
                color: 'auto'
              },
              width: 4, // 指针的宽度
              length: '75%' // 指针长度，按照半圆半径的百分比
            },
            axisTick: {
              distance: -30,
              length: 8,
              lineStyle: {
                color: '#fff',
                width: 2
              }
            },
            splitLine: {
              distance: -40,
              length: 30,
              lineStyle: {
                color: '#fff',
                width: 1
              }
            },
            axisLabel: {
              color: 'auto',
              distance: -22,
              fontSize: 10
            },
            detail: {
              valueAnimation: true,
              formatter: '{value} %',
              color: 'auto',
              textStyle: {
                fontSize: 15
              }
            },
            data: [{
              value: response.data.CompleteRate_4C
            }]
          }]
        }
        myChart1.setOption(option1)
        myChart2.setOption(option2)
        myChart3.setOption(option3)
      }).catch(_ => {
        this.loading.loading2 = false
      })
    },
    handleClick(tab, event) {
      if (tab.index === '0') {
        this.earlyWarningNum = this.tableData_1C.length
      }
      if (tab.index === '1') {
        this.earlyWarningNum = this.tableData_2C.length
      }
      if (tab.index === '2') {
        this.earlyWarningNum = this.tableData_4C.length
      }
    },
    getMaxVal(dataList) {
      // 计算ehcarts y轴最大值
      let maxVal = 0 // 最大值
      // 1. 遍历 dataList（图表需要展示的数据） 获取最大值
      dataList.forEach((res) => {
        const number = parseFloat(res)
        if (number > maxVal) {
          maxVal = number
        }
      })
      // 2. 最大值 向上取整
      maxVal = Math.ceil(maxVal)
      // 3. 最大值 被5整除，防止y轴步长出现小数
      for (let i = 0; i < 5; i++) {
        if (maxVal % 5 !== 0) {
          maxVal++
        }
      }
      return maxVal
    },
    getIntVal(maxVal) {
      // 计算ehcarts  步长
      let intVal = 0 // 步长
      // 4. 计算y轴步长
      intVal = maxVal / 5
    },

    getYearCheckedSituation() {
      this.loading.loading4 = true
      getYearCheckedSituation(this.conditionFind).then(response => {
        const max1C = this.getMaxVal(response.data.data_1C)
        const max2C = this.getMaxVal(response.data.data_2C)
        const max4C = this.getMaxVal(response.data.data_4C)
        const maxComplete = this.getMaxVal(response.data.data_Complete)
        const maxOverTime = this.getMaxVal(response.data.data_OverTime)
        const maxVal = this.getMaxVal([max1C, max2C, max4C, maxComplete, maxOverTime])
        const intVal = this.getIntVal(maxVal)

        const myChart = echarts.init(document.getElementById('chart-one3'))
        const option = {
          color: this.colorList,
          tooltip: {
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          legend: {
            data: ['1C计划数', '2C计划数', '4C计划数', '总完成数', '总超期数', '总完成率']
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: '',
              min: 0,
              max: maxVal,
              interval: intVal,
              axisLabel: {
                formatter: '{value} '
              }
            },
            {
              type: 'value',
              name: '',
              min: 0,
              max: 100,
              interval: 20,
              axisLabel: {
                formatter: '{value} %'
              }
            }
          ],
          series: [
            {
              name: '1C计划数',
              type: 'bar',
              stack: 'C类型',
              emphasis: {
                focus: 'series'
              },
              data: response.data.data_1C
            },
            {
              name: '2C计划数',
              type: 'bar',
              stack: 'C类型',
              emphasis: {
                focus: 'series'
              },
              data: response.data.data_2C
            },
            {
              name: '4C计划数',
              type: 'bar',
              stack: 'C类型',
              emphasis: {
                focus: 'series'
              },
              data: response.data.data_4C
            },
            {
              name: '总完成数',
              type: 'bar',
              emphasis: {
                focus: 'series'
              },
              data: response.data.data_Complete
            },
            {
              name: '总超期数',
              type: 'bar',
              emphasis: {
                focus: 'series'
              },
              data: response.data.data_OverTime
            },
            {
              name: '总完成率',
              type: 'line',
              yAxisIndex: 1,
              emphasis: {
                focus: 'series'
              },
              data: response.data.data_CompleteRate
            }
          ]
        }
        myChart.setOption(option)
        this.loading.loading4 = false
      }).catch(_ => {
        this.loading.loading4 = false
      })
    },
    getEarlyWarning() {
      this.loading.loading5 = true
      getEarlyWarning(this.conditionFind).then(response => {
        this.tableData_1C = response.data.list_1C
        this.tableData_2C = response.data.list_2C
        this.tableData_4C = response.data.list_4C
        this.earlyWarningNum = response.data.list_1C.length
        this.loading.loading5 = false
      }).catch(_ => {
        this.loading.loading5 = false
      })
    },
    warningCycle(val) {
      this.conditionFind.earlyWarningCycle = val
      this.tableData_1C = []
      this.tableData_2C = []
      this.tableData_4C = []
      this.getEarlyWarning()
    },
    formatDate(row, column) {
      const date = new Date(parseInt(row.planDate))
      const Y = date.getFullYear() + '-'
      const M = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) + '-' : date.getMonth() + 1 + '-'
      const D = date.getDate() < 10 ? '0' + date.getDate() + ' ' : date.getDate() + ' '
      // let h = date.getHours() < 10 ? '0' + date.getHours() + ':' : date.getHours() + ':';
      // let m = date.getMinutes() < 10 ? '0' + date.getMinutes() + ':' : date.getMinutes() + ':';
      // let s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
      // return Y + M + D + h + m + s;
      return Y + M + D
    },
    dateDiff(row) {
      // date1结束时间
      let date1 = new Date(row.planDate)
      console.log(date1)
      // date2当前时间
      let date2 = new Date()
      date1 = new Date(date1.getFullYear(), date1.getMonth(), date1.getDate())
      date2 = new Date(date2.getFullYear(), date2.getMonth(), date2.getDate())
      const diff = date1.getTime() - date2.getTime() // 目标时间减去当前时间
      const diffDate = diff / (24 * 60 * 60 * 1000) // 计算当前时间与结束时间之间相差天数
      return diffDate
    }
  }
}
</script>

<style scoped lang="scss">
.data-statistics{
  background: rgb(212, 212, 212);
  padding: 6px;
  overflow-y: auto;
  .hide-tab{
    padding-top: 6px;
    padding-bottom:8px;
    margin-top: -48px;
    transition: all 0.4s linear;
  }
  .show-tab{
    margin-top: 6px;
    padding-bottom:0;
    transition: all 0.4s linear;
  }
  .el-tabs{

    ::v-deep .el-tabs__header{
      margin: 0;
      .el-tabs__item{
        background: white;
      }
      .el-tabs__item:hover{
        transform: scale(1.04,1.06);
      }
      .is-active{
        background: white;
      }
    }
  }

  .el-row{
    flex: 1;
    display: flex;
    min-height: 250px;
    .el-col{
      background: white;
      .col-div{
        padding: 0 8px;
        height:calc(100% - 42px);
        width:100%;
      }
    }
    .el-col:not(:last-child){
      margin-right: 8px;
    }
  }
  .el-row:not(:last-child){
    padding-bottom: 8px;
  }
}
.col-title{
  height: 34px;
  line-height: 34px;
  padding-left: 10px;
  font-weight: bold;
  text-align: left;
  font-size: 15px;
  margin-bottom: 6px;
  color: white;
  background:linear-gradient(180deg,#409eff,#64b1ff);
  .dept-select{
    margin-right: 16px;
    color: white;
    cursor: pointer;
  }
  .dept-select:hover{
      transform: scale(1.04,1.04);
    }
}
.col-table{
  width: 100%;
  text-align: left;
  height: calc(100% - 48px);
  border-collapse: collapse;

  border-spacing: 0;
    td,th{
        font-size: 15px;
        color: black;
        width: 25%;
        border: solid 1px #ccc;
        padding: 6px;
    }
    td{
      text-align: center;
      cursor: pointer;
    }
    td:hover{
      color: white;
      font-weight: bold;
      background: #409eff;
    }
}
.sortList{
  div{
    flex: 1;
    padding:4px 4% 0;
    cursor: pointer;
  }
  p{
    height: 32px;
    line-height: 32px;
    display: flex;
    color: white;
    .num{
      display: inline-block;
      text-align: center;
      height: 30px;
      width: 30px;
      border-radius: 50%;
      box-shadow: 2px 2px 2px rgb(102, 102, 102);
    }
    .content{
      padding: 0 10px;
      font-size: 14px;
      flex: 1;
      display: flex;
      span{
        flex: 1;
        text-align: right;
      }
    }
  }
  div:hover{
    background: #eeeeee;
    p{
      transform: scale(1.04,1.04);
    }
  }
}
.basic-div{
  display: flex;
  margin-bottom: 6px;
  flex: 1;
    .itemrow-item{
        flex: 1;
        margin: 2px 5px 2px 2px;
        border-radius: 4px;
        cursor: pointer;
        display: grid;
        text-align: center;
        align-items: center;
        color:white;
        background: linear-gradient(180deg,#51c3fb,#99e3fd);
        p{
          font-size: 12px;
        }
        span{
            font-size: 15px;
        }
    }
    .itemrow-item:nth-child(odd){
      background: linear-gradient(180deg,#939bf8,#d1d4f8);
    }
    .itemrow-item:hover{
      transform: scale(1.06,1.06);
    }
}
.el-icon-s-data{
  margin-right: 10px;
  font-size: 18px;
}
.tableClass{
  position: absolute;
  width: 10px;
  height: 10px;
  top:0;
  left: 0;
  background: white;
  background: rgb(212, 212, 212);
  z-index: 3;
  overflow: hidden;
  transition: all 0.4s linear;
}
.bigtable{
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 2003;
}
.tableClass-top{
  height: 36px;
  line-height: 36px;
  padding-left: 14px;
  font-size: 15px;
  color:#409eff;
  background: white;
  .el-icon-close{
    position: absolute;
    font-size: 24px;
    cursor: pointer;
    color: black;
    right: 14px;
    top: 6px;
  }
}
.dialog-look {
  .el-dialog__body {
    height: calc(80vh - 1px);
    .base-table {
      height: 470px!important;
    }
  }
}
#customers {
  border-collapse: collapse;
  width: 100%;
  margin-bottom: 20px;
  margin-top: 20px;
}
#customers td, #customers th {
  border: 1px solid #DFE6EC;
  font-size: 16px;
  line-height: 1.5;
  padding: 8px 0;
}
#customers tr td:nth-child(odd){
  width: 120px;
  white-space: nowrap;
  padding-left: 20px;
  padding-right: 26px;
  text-align: right;
  background: #E9F2FC;
}
#customers tr td:nth-child(even){
  padding-left: 20px;
  padding-right: 20px;
}
.dialog_box #customers tr td.file-box {
  width: 100%;
  text-align: left;
  background: #ffffff;
}
#customers .file-content {
  min-height: 187px;
}
.spanS {
  font-weight: bolder;
  font-size: 18px;
}

.completionRate_css {
  margin-right:8px;
  width:100%;
}
.completionRateItem_css {
  width: 140px;
  height: 140px;
  float: left;
  margin-left:4%;
}
.p_title{
  font-weight: 550;
  font-size: 20px;
  margin-top: 10px;
  margin-bottom: 8px;
  margin-left: 18px;
}
</style>
